<!--
 * @Author: Bonnie
 * @Date: 2021-12-03 15:32:23
 * @LastEditTime: 2021-12-03 16:23:47
 * @LastEditors: Bonnie
 * @Description: 下载文件
 * @FilePath: /public_demo/src/views/file/downloadFile.vue
-->
// 下载图片
<template>
  <div class="doanload-container">
    <div>
      <!-- <img src="public/images/WeChat9c604263b4fefd91c78f39327af9e9cc.png" /> -->
    </div>
    <a
      href="http://touxiangkong.com/uploads/allimg/20203301301/2020/3/aquEJb.jpg"
      download="imgDownload"
    >下载图片</a>
    <br />下载图片，利用a标签的href时 默认是打开查看图片，需要添加down属性,download属性存放下载文件的名称
    <br />
    <span class="emphasize">href 所指向的地址，必须与当前网站同源；非同源链接download属性会无效，浏览器会直接打开图片</span>
    <br />参考资料：
    <em @click="toDetail" class="underline cursor-pointer em-hover">前端实现图片下载</em>
    <br />MDN:
    <em @click="toMDN" class="underline cursor-pointer em-hover">a标签</em>
    <br />
    <br />
    <a
      href="https://s.momocdn.com/w/u/others/2020/09/08/1599561229767-导入用户模板.xlsx"
      download="download file"
    >下载文件</a>
    下载文件，可直接将链接挂载到a标签的href属性
    <br />
    <em @click="toDownload" class="underline cursor-pointer em-hover">前端实现文件下载功能的三种方式</em>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      params: ""
    };
  },
  created() {},
  mounted() {},
  methods: {
    toDetail() {
      window.open("https://segmentfault.com/a/1190000010694215", "_blank");
    },
    toMDN() {
      window.open(
        "https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a",
        "_blank"
      );
    },
    toDownload() {
      window.open(
        "https://cloud.tencent.com/developer/article/1630962",
        "_blank"
      );
    }
  }
};
</script>
<style lang='scss' scoped>
.doanload-container {
  flex: 1;
}
div {
  img {
    width: 700px;
  }
}
</style>